<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.js"></script>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <style>
        tr{
            height: 40px;
        }
    </style>
</head>
<body>
    用户中心
    <hr class="layui-bg-red">
    <!--显示个人信息-->
    <div id="showUserInfoDiv" style="width: 400px;margin: auto;margin-top: 50px;">
        <table border="1px" cellspacing="0" cellpadding="5">
            <tr style="height: 100px">
                <th width="100px">头像:</th>
                <td width="400px">
                    <span><img th:src="${session.user.img}"></img></span>
                </td>
            </tr>
            <tr>
                <th>账户名称:</th>
                <td>
                    <span th:text="${session.user.username}"></span>
                </td>
            </tr>
            <tr>
                <th>真实姓名:</th>
                <td><span th:text="${session.user.realname}"></span></td>
            </tr>
            <tr>
                <th>期望薪资:</th>
                <td><span th:text="${session.user.money}"></span></td>
            </tr>
            <tr>
                <th>工作地点:</th>
                <td><span th:text="${session.user.workposition}"></span></td>
            </tr>
            <tr>
                <th>性别:</th>
                <td><span th:text="${session.user.gender}"></span></td>
            </tr>
            <tr>
                <th>年龄:</th>
                <td><span th:text="${session.user.age}"></span></td>
            </tr>
            <tr>
                <th>邮箱:</th>
                <td><span th:text="${session.user.email}"></span></td>
            </tr>
            <tr>
                <th>手机号:</th>
                <td><span th:text="${session.user.phone}"></span></td>
            </tr>
            <tr>
                <th>学历:</th>
                <td><span th:text="${session.user.education}"></span></td>
            </tr>
            <tr>
                <th>学校:</th>
                <td><span th:text="${session.user.school}"></span></td>
            </tr>

            <tr>
                <th>籍贯:</th>
                <td><span th:text="${session.user.address}"></span></td>
            </tr>
            <tr>
                <th>班级:</th>
                <td><span th:text="${session.user.cid}"></span></td>
            </tr>
            <tr>
                <th>备注:</th>
                <td><span th:text="${session.user.remark}"></span></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button id="editUserInfo" class="layui-btn">修改个人信息</button>
                </td>
            </tr>
        </table>
    </div>
    <!--更新个人信息-->
    <div id="updateUserDiv" style="display:none;width: 900px;margin: auto;margin-top: 50px;">
        <form class="layui-form" action="/userUpdate" method="post">
            <table>
                <tr>
                    <td width="400px">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户头像</label>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
                                <button type="button" class="layui-btn" id="test9">开始上传</button>
                            </div>
                            <input type="hidden" name="img" id="img" value="">
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">真实姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">期望薪资</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">工作地点</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男">
                                <input type="radio" name="sex" value="女" title="女" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </td>
                    <td width="400px">
                        <div class="layui-form-item">
                            <label class="layui-form-label">学历</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">学校</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">籍贯</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">班级</label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required">
                                    <option value=""></option>
                                    <option value="0">实验11教</option>
                                    <option value="1">实验12教</option>
                                    <option value="2">实验13教</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone"  required lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formUpdateDemo">立即修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>
<script>
    //Demo
    layui.use(['form','upload'], function(){
        var form = layui.form;
        var upload = layui.upload;
        //文件上传
        upload.render({
            elem: '#test8'
            ,accept:'images'
            ,exts:'jpg|png|gif|bmp|jpeg|webp'
            ,url: '/file/upload'
            ,auto: false
            //,multiple: true
            //bindAction指定点击之后产生的对象
            ,bindAction: '#test9'
            ,done: function(res){
                if(res.code==200){
                    alert("上传成功")
                    $("#img").val(res.msg);
                }
            }
        });

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        //给修改按钮添加单击事件
        $("#editUserInfo").click(function (){
            //隐藏显示用户信息的div
            $("#showUserInfoDiv").css("display","none")
            //显示修改用户信息的div
            $("#updateUserDiv").css("display","")
        })
    });
</script>